import { useState } from 'react';
import './ProBlem.css'

const Problem = () => {
  const [activeItem, setActiveItem] = useState(null);

  const handleClick = (item: any) => {
    setActiveItem(activeItem === item ? null : item);
  };
  return (
    <div className='boxecs'>
      <div className="top-lop">
        <ul>
          <li>
            <img src="../src/assets/images/baopic.png" alt="" />
          </li>
          <li>常见问题</li>
          <li>客服中心</li>
          <li>返回首页</li>
        </ul>
      </div>
      <div className="top-lop2">
        <input type="text" placeholder='请输入问题关键词，如：发票' />
        <button>搜索</button>
      </div>
      <div className="center-lop">
        <div className="center-top-left">
          <ul>
            {['特殊说明', '商用授权', '注册、登录', '下载', '票据', '充值退款', '软件常见问题', '网站问题', '设计师签约'].map((item) => (
              <li key={item} onClick={() => handleClick(item)}>
                {activeItem === item ? '−' : '+'} {item}
                {activeItem === item && (
                  <ul>
                    <li>常用问题</li>
                    <li>企业VIP</li>
                  </ul>
                )}
              </li>
            ))}
          </ul>
        </div>
        <div className="center-top-right">
          <ul>
            <li>特殊说明</li>
            <li>+个人VIP和企业VIP有什么区别?</li>
            <li>+什么是商用?</li>
            <li>+购买企业VIP是否可以获得商用授权?</li>
            <li>+包图网企业VIP商用的保障?</li>
            <li>+摄影图素材中的肖像可以商用吗?</li>
            <li>+网站的素材下载后可以商用吗?</li>
            <li>+侵权声明</li>
          </ul>
        </div>
      </div>
      <div className="center-lop2">
        <div>
          <img src="../src/assets/images/zaixian.png" alt="" />
          <p><b>在线客服</b></p>
          <p>人工服务时间：9:30-18:30</p>
          <p>我要咨询</p>
        </div>
        <div>
          <img src="../src/assets/images/dianhua.png" alt="" />
          <p><b>电话客服</b></p>
          <p>服务时间：工作日9:00-18:00</p>
          <p>热线电话：021-31770313</p>
        </div>
        <div>
          <img src="../src/assets/images/vip.png" alt="" />
          <p><b>企业VIP咨询</b></p>
          <p>人工服务时间：9:30-18:30</p>
          <p>我要咨询</p>
        </div>
        <div>
          <img src="../src/assets/images/jian.png" alt="" />
          <p><b>提建议</b></p>
          <p>欢迎提出对产品的想法/建议</p>
          <p>我要反馈</p>
        </div>
      </div>
      <div className="footer-lop">
        <ul>
          <li>全站精品</li>
          <li>放心下载</li>
          <li>商用无忧</li>
          <li>正版版权</li>
          <li>海量素材</li>
          <li>优质服务</li>
        </ul>
      </div>
      <div className="footer-lop2">
        <div className="npc">
          <div className="left-ccs">
            <img style={{ width: '120px' }} src="../src/assets/images/bao2.png" alt="" />
          </div>
          <div className="right-ccs">
            <ul>
              <li>今日新图</li>
              <span>|</span>
              <li>热门专题</li>
              <span>|</span>
              <li>设计图片</li>
              <span>|</span>
              <li>售后服务</li>
              <span>|</span>
              <li>关于我们</li>
              <span>|</span>
              <li>联系我们</li>
              <span>|</span>
              <li>加入我们</li>
              <span>|</span>
              <li>帮助中心</li>
              <span>|</span>
              <li>在线客服</li>
              <span>
                <img src="../src/assets/images/weixin.png" alt="" />
              </span>
              <span>
                <img src="../src/assets/images/weibo.png" alt="" />
              </span>
            </ul>
          </div>
        </div>
        <div className="pdf">
          <p>为了防范电信网络诈骗，如接到962110来电，请立即接听
            <img src="../src/assets/images/e.png" alt="" />
            <img src="../src/assets/images/shuang.png" alt="" />
          </p>
          <ul>
            <li>
              <img src="../src/assets/images/guohui.png" alt="" />
              沪ICP备16053114号-2&emsp;ICP证:沪B2-20180032
            </li>
            <li>
              <img src="../src/assets/images/gongan.png" alt="" />
              沪公网安备31011502400137号
            </li>
            <li>
              <img src="../src/assets/images/shanghai.png" alt="" />
              上海工商
            </li>
            <span>
              Copyright©2016-2024 包图网ibaotu.com 版权所有
            </span>
          </ul>
          <p>
            <ul>
              <li>广播电视节目制作经营许可证（沪）字第03172号</li>
              <li>网络文化经营许可证 沪网文{2019}2346-159号</li>
              <li>出版物经营许可证新出发沪批字第Y8311号</li>
              <li>《包图网络服务使用协议》</li>
              <li>《包图隐私政策》</li>
              <li>违法和不良信息举报电话:021-31770313 邮箱:kf@ibaotu.com</li>
            </ul>
          </p>
        </div>
      </div>
    </div>
  )
}

export default Problem